#landing{
  width:100%;
  height:60pc;
    position:relative;
  background-repeat:no-repeat;
  background-position:center;
  background-attachment:fixed;
  background-image:url('../img/Project img/Opera House 04.jpg');
  object-fit: cover;
}
#intro{
  position:absolute;
  top:80%;
  color:#000;
   background:#fff;
   padding:100px;
   border-radius:150px 150px 0 0;
   font-size: 20px;
font-weight: 650;
}
emp{
  color:#0000ff;
}
.time-info emp{
  font-size: 25px;
  font-weight:bold;
}
.time-info{
  font-size: 20px;
}
#sec-work{
  margin:0px;
  width:100%;
}
.cont{
    height:550px;
    width:100%;
    margin-top:150px;
    position:relative;
}
.link{
  color:#fff;
  padding:15px;
  text-decoration: none;
  font-weight:700;
  font-size: 20px;
  box-shadow:4px 4px 4px grey;
  background: #0000FF;
  border-radius: 10px;
  position:relative;
  top:50px;
  transition:0.4s ease-in-out;
}
.left{
  display:block;
  float:left;
  padding:50px;
    transition:0.6s ease-in-out;
}
.right{
  float:right;
  display:block;
 padding:50px;
      transition:0.6s ease-in-out;
}
.txt-right{
  width:500px;
  font-size: 15.5px;
  text-indent: 20px;
}

.txt-left{
  width:500px;
  font-size: 15.5px;
  text-indent: 20px;
}
.work-type{
  font-size:25px;
  border-bottom:5px solid blue;
   display: inline-block;
position:relative;
font-weight: 650;
padding-bottom:15px;
width:160px;
}
#rcntwrk{
  width:50%;
  height:550px;
    position:relative;
  background-repeat:no-repeat;
  background-position:center;

  transition:0.5s ease-in-out;
  object-fit: cover;
}

.rcntwrk-right{
float:right;
}

.rcntwrk-left{
  float:left;
}
#shrt-work{
  display: inline-block;
  width:100%;
  margin:30px 0px;
text-align: center;
transition:0.4s ease-in-out;

}
#shrt-work a{
  color:#fff;
  padding:15px;
  text-decoration: none;
  font-weight:700;
  font-size: 20px;
  box-shadow:4px 4px 4px grey;
  background: #0000FF;
  border-radius: 10px;
  transition:0.2s ease-in-out;
}
#shrt-work:hover a,
.link:hover
{
  box-shadow:6px 6px 6px grey;
  background:#000;
  color:#fff;
}
#timeline{
  display:block;
  width:800px;
  height:300pc;
  margin:auto;
  margin-top:20px;
}
#time-left{
  float:left;
  height:100%;
  width:300px;
}
#time-right{
  float:right;
  height:100%;
  width:350px;
}
#line{
  position:relative;
  margin:auto;
  height:100%;
  width:2px;
  background-color:black;
  border-radius:10px;
}
.time-cont{
margin-top:100px;
position:relative;
display:inline-block;
border-radius:20px;
}
.time-cont-right{
position:relative;
margin-top:100px;
top:100px;
display:inline-block;
border-radius:20px;
}
#time-min{
  float:left;
  height:100%;
  width:350px;
  display:none;
}
.time-img{
width:350px;
border-radius:20px;
}
.connecter{
position:absolute;
top:150px;
width:50px;
height:2px;
border-radius:20px 0px 0px 20px;
background-color:black;
}
#connecter-right{
right:-50px;
}
#connecter-left{
left:-50px;
} 
.swiper {
  width: 100%;
  height: 100%;
 
}
#tet{
  height:300px;
}
.swiper-slide {
  text-align: center;
        font-size: 18px;
        background: #bbb9b9;
        height:200px;
        box-shadow:0px 0px 5px #000;
        opacity:0.8;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        transition:0.4s ease-in-out;
}
.swiper-slide:hover{
opacity:1;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width:1200px){
  .left,
  .right{
    padding:10px;
  }
}
@media screen and (max-width:1090px){
.cont{
  height:500px;
  position:relative;
  transition:0.4s ease-in-out;
  margin:5px;
}
#intro{
  font-size:18px;
  top:70%;
}
.left,
.right{
  margin:0px;
  float:none;
  padding:0;
}
#rcntwrk{
  width:100%;
  height:100%;
}
.txt-left,
.txt-right
{
  font-size:15px;
  margin:0px;
  height:0%;
  top:90%;
  position:absolute;
  width:100%;
  background:white;
  z-index:1;
  overflow:hidden;
    transition:0.4s ease-in-out;
}
.link{
  border-radius: 10px;
}
.work-type{
  margin:0px;
  left:0px;
  border:none;
  padding-bottom:0px;
  top:90%;
  position:absolute;
  transition:0.4s ease-in-out;
  width:100%;
  text-align:center;
  font-size:20px;
  background:black;
  color:white;
  z-index:2;
  height:50px;
}
.cont:hover .txt-left,
.cont:hover .txt-right{
height:100%;
top:0%;
}
@media only screen and (max-device-width:1366px){
  #landing,
  #rcntwrk{
    background-attachment: scroll;
  }
}
@media screen and (max-width:700px){
  #landing{
    background-image:url('../img/Project img/Residential/82- Al-Thourayya Towers  Residential Buildings/04-min.jpg');
    height:45pc;
  }
  #intro{
    top:70%;
  }
  #time-min {
display:block;
position:absolute;
margin-left:60px;
height:0px;
  }
    #timeline{  
      height:425pc;
      position:relative;
    }
    .time-img{
      width:200px;
    }
    #line{
      margin-left:10px;
    }
    #time-left,#time-right{
      display:none;
    }
    #connecter-right{
      top:30%;
    right:0px;
    left:-50px;
    }
     #intro{
      font-size:15px;
      top:70%;
    border-radius: 0px;
    padding:50px;
    }
}
@media screen and (max-width:430px){
  .txt-left,
  .txt-right
  {
font-size:13px;
  }
}